<template>
  <section>
    <div class="head">
      <span >automation_id:{{automationId}}</span>
      <el-row>
        <el-col :span="8">
          <div style="text-align: center;">
            <span class="el-icon-star-on" style="font-size:80px;color:#66b1ff">{{report.total}}</span><br/>
            <span style="color: #bcbec2;" >Total</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="text-align: center;">
            <span class="el-icon-success" style="font-size:80px;color:lightgreen">{{report.passed}}</span><br/>
            <span style="color: #bcbec2;" >Passed</span>
          </div>
        </el-col>
        <el-col :span="8">
          <el-tooltip effect="dark" content="click to see failed testCase" placement="bottom">
            <div style="text-align: center;" @click="filterFailedTestCase()">
              <span class="el-icon-error" style="font-size:80px;color:lightcoral">{{report.failed}}</span><br/>
              <span style="color: #bcbec2;" >Failed</span>
            </div>
          </el-tooltip>
        </el-col>
      </el-row>
    </div>
    <div class="detail">
      <el-row :gutter="20" style="margin-left: 10px;margin-top: 10px;margin-bottom:10px;">
        <el-col :span="4">
          <el-input v-model="testCaseName" size="small" placeholder="Test case name" clearable></el-input>
        </el-col>
        <el-col :span="2">
          <el-tooltip content="when no content,click will refresh table">
            <el-button size="small" v-on:click="getTestCaseByName" type="primary">search</el-button>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-table :data="reportDetail" :row-class-name="reportDetailRowClassName">
        <el-table-column label="Date" prop="createdDate"></el-table-column>
        <el-table-column label="Test Case Name" prop="testCaseName"></el-table-column>
        <el-table-column label="Status " prop="status"></el-table-column>
        <el-table-column label="Reason " prop="reason" type="expand" width="150">
          <template slot-scope="scope">
            <el-card>
              <div v-for="(item,index) in JSON.parse(scope.row.reason)">
                <br/><span >reason{{index+1}}</span><br/>
                <span>type : {{item.type}}</span><br/>
                <span>description : </span><br/>
                <div v-if="item.type==='Message' && item.status===false">
                  <span>OutQueue: {{item.desc.outQueue}}</span><br/>
                  <el-button type="text" v-on:click="handleViewDesc(item.desc)">view description</el-button>
                </div>
                <div v-else-if="item.type==='Message' && item.status===true">
                  <span>OutQueue: {{item.desc.outQueue}}</span>
                </div>
                <div v-else v-for="(description, index) in item.desc">
                  <span>{{description}}</span><br/>
                </div>
                <span v-if="item.status===false" style="background-color: #dd6161">status : failed</span>
                <span v-else style="background-color: #11dd91">status : success</span>
              </div>
            </el-card>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="View Message Verifier Description"
                 :visible.sync="msgVerifierDescModal"
                 effect="fade" width="80%"
                 backdrop="true"
                 :close-on-click-modal="false">
        <el-row ><el-col :span="12"><span>Difference: </span></el-col> <el-col :span="4"> <span >Original Msg:</span></el-col>
        </el-row>
        <el-col :span="12"><el-card style="background-color:#b6bfab"><div id="expectMsg" style="word-wrap: break-word;"></div></el-card></el-col>
        <el-col :span="12"><el-card style="background-color:#bfa283">{{msgFailedDescription.original}}</el-card></el-col>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" class="btn btn-default" v-on:click="closeView()">OK</el-button>
        </div>
      </el-dialog>
    </div>

  </section>
</template>

<script>
  import * as JsDiff from 'diff';
  export  default {
    data(){
      return {
        testCaseName:'',
        automationId:this.$route.params.automationId,
        listLoading: false,
        msgVerifierDescModal:false,
        msgFailedDescription:{
          expect:'',
          original:''
        },
        report:{
          automationId:'',
          total:'',
          passed:'',
          failed:'',
        },
        reportDetail:[{
          automationId:'',
          createdDate:'',
          testCaseName:'',
          status:'',
          reason:[
            {
              type:'',
              desc:'',
              status:'',
            }
          ]
        }]
      }
    },
    methods:{
      filterFailedTestCase:function () {
        this.reportDetail = this.reportDetail.filter(function (result) {
          return result.status==='failed';
        });
      },
      getTotal: function () {
        let url='report/total/'+this.automationId;
        this.$http.get(url).then(res=>{
          if(res.body.status==='400'){
            this.$message({
              message:res.body.reason,
              type:'error'
            })
          }
          else {
            this.listLoading = false;
            this.report = res.body;
          }
        })
      },
      getReportDetail: function () {
        let url='report/detail/'+this.automationId;
        this.$http.get(url).then(res=>{
          if(res.body.status==='400'){
            this.$message({
              message:res.body.reason,
              type:'error'
            })
          }
          else {
            this.listLoading = false;
            this.reportDetail = res.body;
          }
        })
      },
      getTestCaseByName: function () {
        if(this.testCaseName){
          let url='report/'+this.automationId+'/'+this.testCaseName;
          this.$http.get(url).then(res=>{
            if(res.body.status==='400'){
              this.$message({
                message:res.body.reason,
                type:'error'
              })
            }
            else if(!res.body){
              this.$message({
                message:'data not found',
                type:'warning'
              });
              this.listLoading = false;
              this.reportDetail = res.body;
            }
            else {
              this.listLoading = false;
              this.reportDetail = res.body;
            }
          })
        } else {
          this.getReportDetail();
        }
      },
      reportDetailRowClassName: function ({row, rowIndex}) {
        if(row.status==='failed'){
          return 'error-row';
        }
        if(row.status==='success'){
          return 'success-row'
        }
        return ''
      },
      handleViewDesc: function (descObj) {
        this.msgFailedDescription = descObj;
        this.msgVerifierDescModal = true;
        this.$nextTick(() => {
          this.compareWords();
        });
      },
      closeView: function () {
        this.msgVerifierDescModal = false;
      },
      compareWords: function () {
        let diff = JsDiff.diffWords(this.msgFailedDescription.expect,this.msgFailedDescription.original),
            color = '',
            span = null,
            fragment = document.createDocumentFragment(),
            display = document.getElementById('expectMsg');
        display.innerHTML='';
        diff.forEach(part=>{
          color = part.added ? 'green' :
                  part.removed ? 'red' : 'grey';
          span = document.createElement('span');
          span.style.color = color;
          span.appendChild(document.createTextNode(part.value));
          fragment.appendChild(span);
        });
        display.appendChild(fragment);
      }
    },
    mounted(){

    },
    created(){
      this.getTotal();
      this.getReportDetail();
    }

  }

</script>
<style>
  .head {
    padding-top:20px;
    border: solid 10px #E9ECF1;  background-color: #FCFCFC;
    padding: 10px 20px;
  }
  .detail {
    border: solid 10px #E9ECF1;  background-color: #FCFCFC;

  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table .error-row {
    background: #ffd6d8;
  }
</style>
